import React from "react";
import Header from "./include/header";
import Bottom from "./include/bottom";
import {Swiper} from 'antd-mobile';
import { TabBar  } from 'antd-mobile';
import {Link} from 'react-router-dom';
class App extends React.Component{
  constructor (props){
    super(props);
    this.state={
      tabs : [
        {
          key: 'saoyisao',
          title: '扫一扫',
          icon: (active) =>
          active ? <img src={require("../asset/icons/扫一扫6.png").default} alt="" /> 
          : <img src={require("../asset/icons/扫一扫66.png").default} alt=""/>,
        },
        {
          key: 'fukuan',
          title: '付款码',
          icon: (active) =>
          active ? <img src={require("../asset/icons/付款码1.png").default} alt="" /> 
          : <img src={require("../asset/icons/付款码0.png").default} alt=""/>,
        },
        {
            key: 'hongbao',
            title: '红包/卡券',
            icon: (active) =>
            active ? <img src={require("../asset/icons/我的卡券1.png").default} alt="" /> 
            : <img src={require("../asset/icons/我的卡券0.png").default} alt=""/>,
          },
        {
            key: 'qiche',
            title: '骑车',
            icon: (active) =>
            active ? <img src={require("../asset/icons/自行车1.png").default} alt="" /> 
            : <img src={require("../asset/icons/自行车0.png").default} alt=""/>,
          },
        
      ],
      goodses:[
        {
          image:"/static/media/images/1.jpg",
          name:"宫崎の日式肉を焼く饭(南充店))",
          pingfen:4.9,
          yueshou:6628,
          fenzhong:39,
          juli:2.8,
          qisong:20,
          renjun:21,
          paiming:"南充冒菜热销榜第2名",
          youhui:"20减3 | 30减5 | 44减8",
          wujiaoxing:"/static/media/images/五角星.png"
        },
            
      {
        image:"/static/media/images/2.png",
        name:"大尚龙虾、烧烤、虾尾、海鲜",
        pingfen:4.8,
        yueshou:8000,
        fenzhong:29,
        juli:1.5,
        qisong:0,
        renjun:23,
        paiming:"南充冒菜热销榜第1名",
        youhui:"35减4 | 44减6 | 68减9",
        wujiaoxing:"/static/media/images/五角星.png"
      },
    {
        image:"/static/media/images/3.png",
        name:"蚝贝鲜生(烧烤，爆炒)",
        pingfen:4.9,
        yueshou:111,
        fenzhong:45,
        juli:3.0,
        qisong:25,
        renjun:34,
        paiming:"入滋入味，赞一个",
        youhui:"19减2 | 30减5 | 68减9",
        wujiaoxing:"/static/media/images/五角星.png"
      },
    {
        image:"/static/media/images/4.png",
        name:"牧童牛排饭(小碗菜·鸡排饭)",
        pingfen:4.8,
        yueshou:1733,
        fenzhong:37,
        juli:2.8,
        qisong:0,
        renjun:25,
        paiming:"非常丰富的食物",
        youhui:"16减2 | 36减5 | 67减8",
        wujiaoxing:"/static/media/images/五角星.png"
      },
    {
        image:"/static/media/images/5.png",
        name:"冒菜西施·火锅冒菜(南充店)",
        pingfen:4.9,
        yueshou:2991,
        fenzhong:30,
        juli:1.8,
        qisong:15,
        renjun:23,
        paiming:"北湖公园快餐简餐热销榜第2名",
        youhui:"20减4 | 36减5 | 49减8",
        wujiaoxing:"/static/media/images/五角星.png"
      },
    {
        image:"/static/media/images/6.png",
        name:"英雄·鸡爪煲·手撕鸡",
        pingfen:4.7,
        yueshou:1908,
        fenzhong:35,
        juli:2.7,
        qisong:15,
        renjun:25,
        paiming:"豆干很好吃，很好，不错",
        youhui:"20减5 | 30减7 | 44减9",
        wujiaoxing:"/static/media/images/五角星.png"
      },


    ]
    };  
}
        colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac',];
        items = this.colors.map((color, index) => (
        <Swiper.Item key={index} className="swiper">
          <div 
            style={{ background: color }}
          >
           <img src={require("../asset/image/banner/pictures/"+(index+1)+".png").default} width={"100%"} alt=""></img>
          </div> 
        </Swiper.Item>
      ))

    render(){
      return(
      <div className={"mainApp"}>
          <Header/>
          <div className="middle">
             <div className="head">
                <TabBar className="tabDiv">
                        {this.state.tabs.map(item => (
                          <TabBar.Item
                            key={item.key}
                            icon={item.icon}
                            title={item.title}
                          />
                        ))}
                </TabBar>
                <Link to={"/main/guanggao"}>
                    
                        <div className="guanggao">
                          <div className="left">
                            <img src={require("../asset/红包.png").default} width={"100%"} alt=""></img>
                          </div>
                          <div className="center">
                              <div className="span1">
                              神券狂欢月
                              </div>
                              <div  className="span2">
                                百万好礼 狂撒海量红包
                              </div>
                          </div>
                          <div className="right">
                              <span>立即抢 ＞</span>
                          </div>
                        </div>
                
                </Link>
             </div>
             <Swiper autoplay  loop className="banner">{this.items}</Swiper>

             <div className={"goodsDiv"}>
                     {this.state.goodses.map((goods,index) =>
                         <div className={"goodsItem"} key={index}>
                            <div className="left">
                                <img src={goods.image} alt="" />
                            </div>
                            <div className="right">
                                  <div className="one">
                                      {goods.name}
                                  </div>
                                       
                                  <div className="two">
                                        <div> <img src={goods.wujiaoxing} alt="" /> {goods.pingfen}  </div>
                                        <div className="yueshou">月售:{goods.yueshou} </div>
                                        <div className="fenzhong">{goods.fenzhong}分钟</div>
                                        <div>{goods.juli}km</div>
                                  </div>

                                  <div className="three">
                                      <div>起送￥{goods.qisong}           免配送费</div>
                                      <div>人均￥{goods.renjun}</div>
                                      <div className="meituan">美团专送</div>   
                                  </div>

                                  <div className="four">
                                      <div>{goods.paiming}</div>
                                  </div>

                                  <div className="five">
                                      <div>
                                        {goods.youhui}
                                        <div className="jintie">含五元津贴</div>
                                      </div>
                                  </div>

                                  <div className="six"> </div>
                                 
                            </div>
                         </div>
                     )
                     } 
             </div>
          </div>
          
          <Bottom history={this.props.history} />
        </div>

              
            )
        }
}
export default App;